<template>
  <div>
    <!-- <div class="home-swipe">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="(item,index) in items" :key="index">
					<img :src="item.url" class="img" />
				</mt-swipe-item>
			</mt-swipe>
		</div> -->

    <div class="main">

      <div class="sutitle">
        <div class="sutitle-name">
          <img src="../../../../static/home/new.png" alt="" width="16px" height="16px" />
          <span>新书上架</span>
        </div>

        <span class="more" @click="goToBookList()">
          <!--<router-link to= '/bookstorage'>更多</router-link>-->
          <span>更多</span>
          <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
        </span>
      </div>

      <div class="home-main">
        <div class="content">
          <div class="sm-content" v-for="(item,index) in bookList" :key="index" @click="goToBook(item)">
            <img :src="item.cover" alt="" />
            <span v-html="item.bookName"></span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";
export default {
  props: ["navid"],
  data() {
    return {
      active: "books",
      bookList: [],
      items: [
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        }
      ],
      datalist: [
        {
          src: "../../../../static/test.png",
          bookname: "边城"
        },
        {
          src: "../../../../static/test.png",
          bookname: "边城"
        },
        {
          src: "../../../../static/test.png",
          bookname: "边城"
        }
      ]
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.getBook();
  },
  methods: {
    goToBook(e) {
      this.$router.push({
        name: "bookcontent"
      });
      localStorage.bookId = e.bookId;
    },
     goToBookList() {
      localStorage.setItem("columnId", 1);
      localStorage.setItem("booktypeid", "book2");
      this.$router.push({
        name: "booklist"
      });
    },
    getBook() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getNewColumResByColumnId",
        params: {
          inParam: {
            sysCode: "FH_PUBOPE",
            time: this.datevalue,
            accId: 1,
            terminalType: 1,
            columnId: this.navid,
            resCount: 12
          }
        }
      })
        .then(response => {
          this.bookList = response.data.data;
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
.home-swipe {
  width: 100%;
  height: 142px;
  /*background: skyblue;*/
}

.main .sutitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}

.main .sutitle .sutitle-name {
  /*background-color: coral;*/
  flex-grow: 10;
  -webkit-flex-grow: 10;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .sutitle .sutitle-name > span {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.main .sutitle .more {
  /*background: #e60012;*/
  font-size: 13px;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  color: #a1a1a1;
}

.main .sutitle .more > a {
  color: #a1a1a1;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 1vh;
  /*background: pink;*/
  margin-bottom: 13px;
}

.home-main .content {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  /*background: aqua;*/
  flex-wrap: wrap;
}

.home-main .content .sm-content {
  width: 26%;
  /*background: slateblue;*/
  overflow: hidden;
  margin-bottom: 10px;
}

.home-main .content .sm-content img {
  width: 100%;
  border-radius: 10px;
  box-shadow: darkgrey 2px 2px 5px;
  /*background: darkorange;*/
}

.home-main .content .sm-content span {
  width: 100%;
  font-family: "微软雅黑";
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>